<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="username">
        张三
    </div>
    <button>按钮</button>
    <script>
    //    var  flag = true;
       var btn =  document.querySelector("button");
       var usernameEle = document.querySelector(".username");
    //    btn.onclick = function(){
    //         // 把 flag 取反 
    //         flag  = !flag;
    //         // 根据flag的值  改变  username div里的名字；
    //         if(flag){
    //             // flag是true ，名字是张三 
    //             usernameEle.innerHTML = "张三";
    //         }else{
    //             // flag是false 名字是李四
    //             usernameEle.innerHTML = "李四";
    //         }
    //    }


    // 多种状态的切换 
    var num = 0;
    document.querySelector("button").onclick = function(){
        num++;
        switch(num){
            case 1:
                console.log("第一种情况");
                break;
            case 2:
                console.log("第二种情况");
                break;
            case 3:
                console.log("第三种情况")
                break;
            default :
                 console.log("其他情况");
                break;
        }
        if(num==3){
            num=0;
        }

    }


    </script>
</body>
</html>